import React from 'react';
import * as lodash from 'lodash';
import {Button, Checkbox, InputNumber,message, Select, Radio } from 'antd';
const RadioGroup = Radio.Group;
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaBrowser, WeaCheckbox, WeaHelpfulTip,WeaInputNumber} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EField_New from './base/EField_New';
import EOrderCol from './base/EOrderCol';
import EPicturesSettings from './base/EPicturesSettings';
import EMoreAddress from './base/EMoreAddress';
import './Style_7.css';
// 文档中心，数据来源
class Content_7_DataSource extends React.Component {

    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        topDocs: this.props.tabData.topDocs,
        docSourceType: this.props.tabData.docSourceType || this.props.tabNew.docSourceType.selected,
        newsCenters: this.props.tabData.newsCenters,
        docCatalogs: this.props.tabData.docCatalogs,
        virtualCatalogs: this.props.tabData.virtualCatalogs,
        appointDocs: this.props.tabData.appointDocs,
        showMode: this.props.tabData.showMode || this.props.tabNew.showMode.selected,
        scrollDirection: this.props.tabData.scrollDirection || this.props.tabNew.scrollDirection.selected,
        isOpenAttachment: this.props.tabData.isOpenAttachment || this.props.tabNew.isOpenAttachment.selected,
        topDocsNames: this.props.tabData.topDocsNames,
        newsCentersNames: this.props.tabData.newsCentersNames,
        docCatalogsNames: this.props.tabData.docCatalogsNames,
        virtualCatalogsNames: this.props.tabData.virtualCatalogsNames,
        appointDocsNames: this.props.tabData.appointDocsNames,
        topStyle:this.props.tabData.topStyle || this.props.tabNew.topStyle.selected,
        eFieldNewDataSource: this.props.tabData.eFieldNewDataSource || this.props.tabNew.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.tabData.eFieldNewUsedKeys || [],
        eFieldNewVisible: false,
        pictureWidth: this.props.tabData.pictureWidth,
        pictureHeight: this.props.tabData.pictureHeight,
        widthUnit: this.props.tabData.widthUnit || 'px',
        heightUnit: this.props.tabData.heightUnit || 'px',
        autoHeight: this.props.tabData.autoHeight || false,
        orderColDataSource: lodash.isEmpty(this.props.tabData.orderColDataSource) ? this.props.tabNew.orderColDataSource : this.props.tabData.orderColDataSource,
        orderColUsedKeys: this.props.tabData.orderColUsedKeys || [],
        orderColVisible: false,
        isShowSettingShowType: this.props.tabData.isShowSettingShowType || this.props.tabNew.isShowSettingShowType,
        showType: this.props.tabData.showType|| '0',
        scrollSpeed: this.props.tabData.scrollSpeed|| '20',
        eMoreAddress: this.props.tabData.eMoreAddress|| '',
        eMoreShowType: this.props.tabData.eMoreShowType|| '0',
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onDocSourceTypeChange = this.onDocSourceTypeChange.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onChangeSize = this.onChangeSize.bind(this);
    }

    render() {
        const {title, docSourceType, showMode,scrollDirection,
            isOpenAttachment, topDocsNames, newsCentersNames, docCatalogs,
            docCatalogsNames, virtualCatalogsNames, topStyle,  
            appointDocsNames, eFieldNewVisible, eFieldNewDataSource,
            pictureWidth = '120', pictureHeight = '108',
            widthUnit, heightUnit, autoHeight, orderColDataSource, 
            orderColUsedKeys, orderColVisible, isShowSettingShowType,
            eMoreAddress, eMoreShowType
        } = this.state;
        const {eFieldNewUsedKeys} = this.state;
        const {tabNew} = this.props;
        const type = {newsCenters: 'docnews', docCatalogs: 'doccategory', virtualCatalogs: 'docdummy', appointDocs: 37};
        const isMultCheckbox = {newsCenters: true, docCatalogs: true, virtualCatalogs: true, appointDocs: true};
        const replaceDatas = {newsCenters: newsCentersNames, docCatalogs: docCatalogsNames, virtualCatalogs: virtualCatalogsNames, appointDocs: appointDocsNames};
        let EFieldNew = <div></div>;
        let _scrollSpeed=this.state.scrollSpeed;
        if(this.state.scrollSpeed==undefined){
            _scrollSpeed=20;
        }

        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@hk8684`} {...eFieldNewProps}/>
        }

        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }

        let orderColComp = <div></div>;
        if (orderColVisible) {
            const orderColProps = {
                orderColDataSource: _.cloneDeep(orderColDataSource),
                orderColUsedKeys: _.cloneDeep(orderColUsedKeys),
                onOk: (data) => {
                    this.setState({
                        orderColDataSource: data.orderColDataSource,
                        orderColUsedKeys: data.orderColUsedKeys,
                        orderColVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        orderColVisible: false
                    });
                }
            };
            orderColComp = <EOrderCol ecId={`${this && this.props && this.props.ecId || ''}_EOrderCol@opotba`} {...orderColProps}/>
        }

        const orderColUsedNames = [];
        for (let i = 0, len = orderColUsedKeys.length; i < len; i++) {
            for (let j = 0, len2 = orderColDataSource.length; j < len2; j++) {
                if (orderColUsedKeys[i] == orderColDataSource[j].key) {
                    orderColUsedNames.push(orderColDataSource[j].fieldName + '-' + (orderColDataSource[j].orderType == '0' ? getLabel(340,'降序') : getLabel(339,'升序')));
                }
            }
        }

        let authoHeight = (autoHeight ? "portal-news-authoheight" : '') ;
        const radioStyle = {
            display: 'inline-block',
            height: '30px',
            lineHeight: '30px',
            position: 'relative'
        };
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xb2tgg`}
                className="portal-esetting-dialog portal-news-esetting-dialog"
                visible={true}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 507}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@tb0vs0`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q3ci4q`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@xq8rp4`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={value => this.setState({title: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lhr1wr`} label={getLabel(507373,'标签页显示未读')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@nzoio0`}
                            options={isShowSettingShowType == '1' ? [
                                {key: '0', selected: true, showname: getLabel(23857,'不显示')},
                                {key: '1', selected: false, showname: <div>{getLabel(507374,'显示未读标记') }<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@xd5x3n`} className={'portal-news-showtype-tip'} width = {196} title={getLabel(507375,'只统计显示条数中的未读文档') } placement="bottomLeft" /></div>},
                                {key: '2', selected: false, showname: <div>{getLabel(81437,'显示未读数量') }<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@1zlqog`} className={'portal-news-showtype-tip'} className={'AAAAAAAA'} width = {196} title={getLabel(507376,'开启后，只统计显示条数中的未读文档，且涉及跨目录统计，可能会有性能问题。') } placement="bottomLeft" /></div>},
                            ]:[
                                {key: '0', selected: true, showname: getLabel(23857,'不显示')},
                                {key: '1', selected: false, showname: <div>{getLabel(507374,'显示未读标记') }<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ci2d7e`} className={'portal-news-showtype-tip'} width = {196} title={getLabel(507375,'只统计显示条数中的未读文档') } placement="bottomLeft" /></div>},
                            ]}
                            value={isShowSettingShowType == '0' && this.state.showType == '2' ? '0' : this.state.showType}
                            detailtype={3}
                            onChange={value => {
                                this.setState({showType: value});
                            }}
                        />
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cpkpgp`} label={getLabel(23784, '文档置顶')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@n0wjcw`}
                            type={37}
                            title={getLabel(386382, '请选择')}
                            isSingle={false}
                            replaceDatas={topDocsNames}
                            onChange={(ids, names, datas) => this.setState({topDocs: ids, topDocsNames: datas})}
                        />
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@04f6bl`}  label={getLabel(21653, '显示方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{display: 'inline-block',width: '160px'}}>
                            <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@16anak`} ref="fillStyleSelect" size='large'
                                    className="eStyle-7 wea-select eeStyle-7"
                                    dropdownClassName="droptwo"
                                    dropdownMatchSelectWidth={true}
                                    onChange={value => {
                                this.setState({
                                    showMode: value,
                                    topStyle: ''
                                });
                            }} style={{ width: '175px' }} value={showMode}>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@cxtsuk`} className={'portal-imgSlide-images-option'} value="1">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(19525, '列表式')}>
                                        <img className="portal-imgSlide-images-style-content-image" style={{marginRight: '15px'}} src="/spa/portal/images/news/listStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(19525, '列表式')}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@y0v2zn`} className={'portal-imgSlide-images-option'} value="4">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(387382,"列表式2")}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/listStyle2.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(387382,"列表式2")}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@b5n10o`} className={'portal-imgSlide-images-option'} value="2">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(82760, '上图式')}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/abovePictureStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(82760, '上图式')}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@q3ke8z`} className={'portal-imgSlide-images-option'} value="10">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(82760, '上图式')+2}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/abovePictureStyle2.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(82760, '上图式')+2}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@mbgarq`} className={'portal-imgSlide-images-option'} value="11">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(82760, '上图式')+3}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/abovePictureStyle3.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(82760, '上图式')+3}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@i49o43`} className={'portal-imgSlide-images-option'} value="3">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(82759, '左图式')}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/leftPictureStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(82759, '左图式')}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@04h3bj`} className={'portal-imgSlide-images-option'} value="5">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(23804, '双列式')}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/doubleListStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(23804, '双列式')}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@y0pbhy`} className={'portal-imgSlide-images-option'} value="6">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(387383,"摘要式")}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/summaryStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(387383,"摘要式")}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@8ewabd`} className={'portal-imgSlide-images-option'} value="7">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(387384,"摘要式2")}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/summaryStyle2.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(387384,"摘要式2")}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@17voaq`} className={'portal-imgSlide-images-option'} value="8">
                                    <div className="portal-imgSlide-images-style-content-type" title={getLabel(127292, '头条式')}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/topNewsStyle.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{getLabel(127292, '头条式')}</span>
                                    </div>
                                </Option>
                                <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@y6eanv`} className={'portal-imgSlide-images-option'} value="9">
                                    <div className="portal-imgSlide-images-style-content-type" title={'头条式2'}>
                                        <img className="portal-imgSlide-images-style-content-image" src="/spa/portal/images/news/topNewsStyle2.png" alt=""/>
                                        <span className="portal-imgSlide-images-style-content-span">{'头条式2'}</span>
                                    </div>
                                </Option>
                            </Select>
                        </div>
                        {
                            this.state.showMode =='8' || this.state.showMode =='9' || this.state.showMode =='10'  || showMode == '11'?
                                <span className={'portal-new-topStyle-select'} style={{display: 'inline-block',marginLeft: '66px', width: '160px'}}>
                                <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@gjebmb`}
                                    dropdownClassName="droptwo"
                                    dropdownMatchSelectWidth={true}
                                    className="eStyle-7 wea-select"
                                    style={{paddingTop: '0px!important',width: 175}}
                                    ref="fillStyleSelect" size='large'
                                    value={(topStyle =='' ? this.props.tabNew.topStyle.selected : topStyle)}
                                    onChange={value => {
                                        this.setState({topStyle: value});
                                    }}
                                >
                                      {tabNew.topStyle.options.map(d => <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@4l6dj8@${d.key}`} value={d.key}>{d.showname}</Option>)}
                                </Select>
                            </span>
                                : ''
                        }
                    </WeaFormItem>
                    {
                        showMode == '6' || showMode == '7' ? ''
                            : <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cdixg0`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                                {EFieldNew}
                                <div style={{height: '100%', lineHeight: '23px'}}>
                                    <i className="icon-coms-Flow-setting portal-esetting-btn"
                                       style={{position: "relative", zIndex: "12",top:5}}
                                       onClick={() => this.setState({eFieldNewVisible: true})}/>
                                    <div
                                        title={eFieldNewUsedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                        "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{eFieldNewUsedNames.join('，')}</div>
                                </div>
                            </WeaFormItem>
                    }
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9070n3`} label={getLabel(15512, '排序字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        {orderColComp}
                        <div style={{height: '100%', lineHeight: '23px'}}>
                            <i className="icon-coms-Flow-setting portal-esetting-btn"  style={{position: "relative", zIndex: "12",top:5}} onClick={() => this.setState({orderColVisible: true})}/>
                            <div  title={orderColUsedNames.join('，')}  style={{marginTop:-18,"-webkit-box-orient": "vertical","cursor": "pointer","-webkit-line-clamp": 2,}}>&nbsp;&nbsp;&nbsp;&nbsp;{orderColUsedNames.join('，')}</div>
                        </div>
                    </WeaFormItem>
                    {
                        this.state.showMode == '1' || this.state.showMode == '5' || this.state.showMode == '8' ? ''
                        :<EPicturesSettings ecId={`${this && this.props && this.props.ecId || ''}_EPicturesSettings@i0pepr`} onChangeSize={this.onChangeSize} pictureWidth={pictureWidth} widthUnit={widthUnit} authoHeight={authoHeight} autoHeight={autoHeight} pictureHeight={pictureHeight} heightUnit={heightUnit}/>
                    }
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pu58xe`} label={getLabel(20281, '滚动方向')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                       <span className={'portal-new-topStyle-select'} style={{display: 'inline-block', width: '160px'}}>
                            <Select ecId={`${this && this.props && this.props.ecId || ''}_Select@uv1e5v`}
                                dropdownClassName="dropcdone"
                                dropdownMatchSelectWidth={true}
                                className="eStyle-7 wea-select "
                                ref="fillStyleSelect" size='large'
                                style={{paddingTop: '0px!important',width: 160,}}
                                value={showMode == '11' && (scrollDirection == 'Up' || scrollDirection == 'Down')? 'Left': scrollDirection}
                                onChange={value => {
                                    this.setState({scrollDirection: value});
                                }}

                            >
                                {tabNew.scrollDirection.options.map(d => {
                                    if(showMode == '11') {
                                        if(d.key != 'Up' && d.key != 'Down'){
                                            return <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@fdcmih@${d.key}`} value={d.key}>{d.value}</Option>
                                        }else {
                                            return <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@ui8ad1@${d.key}`} style={{display: 'none'}} value={d.key}>{d.value}</Option>;
                                        }
                                    }
                                    else return <Option ecId={`${this && this.props && this.props.ecId || ''}_Option@6i35bo@${d.key}`} value={d.key}>{d.value}</Option>
                                })}
                            </Select>

                                </span>
                    </WeaFormItem>
                    {
                        showMode == '11' ?(scrollDirection == 'Left' || scrollDirection == 'Right') && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3898i8`} label={getLabel(22927, '滚动速度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@0dkb1y`}
                                value={_scrollSpeed}
                                style={{width: '100px'}}
                                onChange={value => {
                                    this.setState({scrollSpeed: value=='0'?20:value});
                                }}
                                min={0}
                            />
                            <span style={{ position: 'relative'}}>ms</span>
                        </WeaFormItem>
                            :(scrollDirection == 'Down' || scrollDirection == 'Up') && <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pieuvn`} label={getLabel(22927, '滚动速度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@fcivle`}
                                value={_scrollSpeed}
                                style={{width: '100px'}}
                                onChange={value => {
                                    this.setState({scrollSpeed:  value=='0'?20:value});
                                }}
                                min={0}
                            />
                            <span style={{ position: 'relative'}}>ms</span>
                        </WeaFormItem>
                    }
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@35axcj`} label={getLabel(518311, '文档无内容时打开附件')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div style={{display: 'inline-block', width: '45px',"line-height": 27,
                            height: 27}}>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@8t2vph`}
                                value={isOpenAttachment}
                                display="switch"
                                id='test'
                                style={{display: 'inline'}}
                                onChange={value => {
                                    this.setState({isOpenAttachment: value});
                                }}
                            />
                        </div>
                        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@uvcmng`}
                            width = {196} //如果要自定义宽度，在这里设置
                            title={getLabel(518312, '启用后，元素中打开无内容的文档时，将直接打开主附件，如主附件未指定，则打开第一个支持在线打开的附件；如关闭，取文档目录的附件打开设置。')}
                        />
                    </WeaFormItem>
                    <EMoreAddress ecId={`${this && this.props && this.props.ecId || ''}_EMoreAddress@gt3pry`} ref="eMoreAddress" eMoreAddress={eMoreAddress} eMoreShowType={eMoreShowType}/>
                </WeaSearchGroup>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@p09ji9`} title={getLabel(127253, '来源设置')} showGroup={true} center={true}>
                    {
                        tabNew.docSourceType.options.map((item, index) => {
                            let dataParams = {};
                            const _type = item.type;
                            if('docCatalogs' == _type) dataParams = {filtercategoryid:docCatalogs, filtertype:3,noAllDirName:'1',iscreate: 0};
                            else dataParams ={};
                            const _typeNames = item.type + 'Names';
                            return (
                                <div style={{position: 'relative', padding: '8px 0'}}>
                                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@4pvqc1@${item.type}`}
                                        key={index}
                                        checked={lodash.indexOf(docSourceType.split(','), item.value) != -1}
                                        style={{position: 'absolute', top: '14px', left: -26, width: '100px', textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}
                                        onChange={(e) => this.onDocSourceTypeChange(item.value, e.target.checked)}
                                    >
                                    <span title={item.label}>{item.label}</span>
                                    </Checkbox>
                                    <div style={{paddingLeft: 121, width: 507}}>
                                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@ofk0q1@${item.type}`}
                                            title={getLabel(386382, '请选择')}
                                            type={type[_type]}
                                            dataParams={dataParams}
                                            quickSearchName={type[_type]=="doccategory"?"categoryname":''}
                                            hideAdvanceSearch={type[_type]=="doccategory"?true:false}
                                            isSingle={false}
                                            replaceDatas={replaceDatas[_type]}
                                            onChange={(ids, names, datas) => {
                                                this.setState({[_type]: ids, [_typeNames]: datas});
                                                if(ids != ''){
                                                    this.onDocSourceTypeChange(item.value, true)
                                                }else{
                                                    this.onDocSourceTypeChange(item.value, false)
                                                }
                                            }}
                                        />
                                    </div>
                                </div>
                            );
                        })
                    }
                </WeaSearchGroup>
            </WeaDialog>

        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@aszgy2`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dmw8ib`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onChangeSize(string,value){
        this.setState({
            [string]: value
        })
    }

    onDocSourceTypeChange(value, checked) {
        const {docSourceType} = this.state;
        const docSourceTypeArr = docSourceType.split(',');
        lodash.pull(docSourceTypeArr, value);
        if (checked) {
            docSourceTypeArr.push(value);
        }
        this.setState({docSourceType: docSourceTypeArr.join(',')});

    }

    onOk() {
        if (!this.state.title) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {
            const {orderColDataSource:ds, orderColUsedKeys:keys, showMode} = this.state;

            const orderColUsed = [];
            for (let i = 0, len = keys.length; i < len; i++) {
                for (let j = 0, len2 = ds.length; j < len2; j++) {
                    if (keys[i] == ds[j].key) {
                        orderColUsed.push(ds[j]);
                    }
                }
            }

            const eMoreAddress = this.refs['eMoreAddress'] ? this.refs['eMoreAddress'].getSaveValues() : {};

            if(showMode == '6' || showMode == '7'){
                this.props.onOk({...this.state, ...eMoreAddress, orderColUsed,eFieldNewUsedKeys: ["7","10","11"]});
            }else this.props.onOk({...this.state, ...eMoreAddress, orderColUsed});

        }
    }

    onCancel() {
        this.props.onCancel();
    }
}

export default Content_7_DataSource;
